{% extends "base/base.html" %}

{% block head %}
{{ super() }}
<!-- Custom styles for this template -->
    <link href="../static/css/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css">
{% endblock %}

{% block navbar %}
{{ super() }}
<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">SmartLab</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="/home">主页</a></li>
            <li><a href="http://it.jssvc.edu.cn/zs/xxjj.html" target="_blank">关于</a></li>
            <li><a href="/contact">联系我们</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="{{ url_for('main.logout') }}">登出</a></li>>
            <li><a href="#">帮助</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
{% endblock %}

{% block page_content %}

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
            <!-- <li><a href="#">Reports</a></li>
            <li><a href="#">Logs</a></li>
            <li><a href="#">Export</a></li> -->
          </ul>
          <ul class="nav nav-sidebar">
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">更多数据<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="/admin/viewdigital">节点搜索</a></li>
                </ul>
            </li>
          </ul>
          <ul class="nav nav-sidebar">
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">用户管理<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="/admin/usermanage">添加</a></li>
                  <li><a href="/admin/usermanage">删除</a></li>
                  <li><a href="/admin/uesrmanage">更改</a></li>
                  <li class="divider"></li>
                  <li><a id="action-1" href="/admin/usermanage">Info</a></li>
                </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

          {% for message in get_flashed_messages() %}
            <div class="alert alert-warning">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ message }}
            </div>
          {% endfor %}

          <h1 class="page-header">Management Center</h1>

          <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="../static/images/temperature01.png" class="img-responsive" alt="Temperature">
              <h4>温度</h4>
              <span class="text-muted"><a href="{{ url_for('user.temperature') }}">Go to see</a></span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="../static/images/humidity.png" class="img-responsive" alt="Humidity">
              <h4>湿度</h4>
              <span class="text-muted"><a href="{{ url_for('user.humidity') }}">Go to see</a></span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="../static/images/light.png" class="img-responsive" alt="Light">
              <h4>光照</h4>
              <span class="text-muted"><a href="{{ url_for('user.lux') }}">Go to see</a></span>
            </div>
          </div>

          <h2 class="sub-header">Digital Sensors</h2>
          <div class="table-responsive">
            <table id="digital-table" class="display" cellspacing="0" width="100%">
              <caption>数字量传感器监视</caption>
              <thead>
                  <tr>
                    <th>Sensor</th>
                    <th>Status</th>
                    <th>Node</th>
                    <th>Address</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
{% endblock %}

{% block scripts %}
{{ super() }}
<!-- DataTables -->
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10-dev/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf-8">
        // var data = {{ data|safe }};
        $(document).ready(function() {
            var lang = {
                "sLengthMenu": "每页 _MENU_ 项",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
                "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sUrl": "",
                "sInfoThousands": ",",
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            };

            var table = $('#digital-table').dataTable({
              language: lang,
              ordering: true,
              searching: true,
              processing: true,
              "ajax": {
                  "url": "/admin/sensordata",
                  "dataSrc": "",
                  "type": "POST",
                  "cache": false
                },
                columns: [
                  {data: "sensor"},
                  {data: "status"},
                  {data: "node"},
                  {data: "address"}
                ]
            }).api();
            //5秒刷新一次表格数据
            setInterval( function () {
                table.ajax.reload( null, false ); // user paging is not reset on reload
            }, 5000 );
        } );
</script>
<script type="text/javascript">
  // For demo to fit into DataTables site builder...
  $('#digital-table')
    .removeClass( 'display' )
    .addClass('table table-striped table-bordered');
</script>
<script type="text/javascript">
  // 默认禁用搜索和排序
  $.extend( $.fn.dataTable.defaults, {
      searching: false,
      ordering:  false

  } );
</script>
{% endblock %}